<template>
	<view class="contract">
		<!-- 策略库 -->
		<view v-for="(items,indexs) in mend" :key="indexs" v-if="cindex=='0'">
			<view style="margin-bottom: 20rpx;">
				<view class="contract-center" v-for="(item,index) in list" :key="index">
					
					<view class="center">
						<view class="center2-item1">
							{{item.name}}
							<text>{{item.num}}</text>
						</view>
						<view class="center2-item2">
							{{item.center}}
						</view>
					</view>
					<view class="center" style="text-align: right;font-weight: bold;">
						<view class="center2-item1 color-fall">
							+408.8%
						</view>
						<view class="center2-item2">
							年化收益率
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"contract",
		data() {
			return {
				btn:['终止','分享','详情'],//执行中按钮
				ctitle:[//bar
					{
						title:'策略库'
					},
					{
						title:'执行中'
					}
				],
				mend:[//标题
					{
						name:'新手推荐',
						image:'/static/goods2.png'
					},
					{
						name:'合约策略',
						image:'/static/goods2.png'
					},
					{
						name:'币币策略',
						image:'/static/goods1.png'
					}
				],
				cindex:0,//标题选中下标
				// 内容
				list:[
					{
						name:'网格交易',
						num:'V2JHYJ',
						center:'网格交易的和约版本，放大本金，加上杠杆,分仓套利'
					},
					{
						name:'马丁追踪',
						num:'V2JHYJ',
						center:'马丁追踪与趋势追踪结合的交易模型，加上杠杆，倍投利器，马丁追踪与趋势追踪结合的交易模型'
					}
				]
			};
		},
		mounted() {
			console.log(Date.now(),"1615970633")
			
		},
		methods:{
			getGoods(item,index){
				this.cindex=index
			}
		}
	}
</script>

<style lang="scss">
	$radio:12rpx;
	$color-opact: $color-fu;
	.contract{
		padding: 50rpx 0rpx;
		// border: 1px solid red;
	}
.contract-center{
	@include flex;
	background-image: url(../../../static/goods1.png);
	@include background;
	padding: 40rpx;
	margin-top: 30rpx;
	.center:nth-child(1){
		width: 70%;
	}
	.center:nth-child(2){
		width: 30%;
	}
	.center{
		
		.center2-item1{
			font-size: 30rpx;
			line-height: 60rpx;
			text{
				padding: 20rpx;
				color: $color-opact;
				font-size: 24rpx;
			}
		}
		.center2-item2{
			color: $color-opact;
			font-size: 24rpx;
			line-height: 35rpx;
			 text-overflow: -o-ellipsis-lastline;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  display: -webkit-box;
			  -webkit-line-clamp: 2;
			  line-clamp: 2;
			  -webkit-box-orient: vertical;
		}
	}
}
</style>
